import React from "react";
import Link from 'umi/link';
import { Row, Col, Table } from 'antd';
import { connect } from 'dva';
import WaterHeaderLeft from './WaterHeaderLeft';
import SearchWaterForm from './SearchWaterForm';

interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  deviceOutdoorFireHydrant?: {
    data: Array<any>,
    dataCnt: number,
  },
  deviceOutdoorFireHydrantAll?: {
    data: Array<any>,
    dataCnt: number
  },
  loading?: boolean
}

let setPageNum = 1;

@connect(({ analyse_device, loading }) => ({
  deviceOutdoorFireHydrant: analyse_device.deviceOutdoorFireHydrant,
  deviceOutdoorFireHydrantAll: analyse_device.deviceOutdoorFireHydrantAll,
  loading: loading.effects['analyse_device/queryDeviceOutdoorFireHydrant'],
}))
class Basiccolumn extends React.PureComponent<IProps> {

  state = {
    current: 1,
    sortType: '',
    isChangePage: false
  };

  queryData = (params) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_device/queryDeviceOutdoorFireHydrant',
      payload: params,
    });
  };

  initCurrent = () => {
    this.setState({
      current: 1
    })
  };

  handleExport = e => {
    const { dispatch } = this.props;

    dispatch({
      type: 'analyse_device/queryDeviceOutdoorFireHydrantAll',
      payload: {
        pageNum: 1,
        pageSize: 10000
      }
    });
  };

  componentWillMount() {
    this.queryData({
      pageNum: 1,
      pageSize: 10
    });
  }

  render() {
    const { deviceOutdoorFireHydrant = { data: [], dataCnt: 0 } } = this.props;
    const { dataCnt, data } = deviceOutdoorFireHydrant;

    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: item.id,
      name: item.name,
      networkAddr: item.networkAddr ? item.networkAddr : '/',
      installLocation: item.installLocation ? item.installLocation : '/',
      receiveTime: item.receiveTime ? item.receiveTime : '/',
      runStatusName: item.runStatusName ? item.runStatusName : '/',
      pressure: item.valueMap ? (Object.keys(item.valueMap).filter(it => it.indexOf('pressure') === 0).map(v => item.valueMap[v])) : [],
      voltage: item.valueMap ? (Object.keys(item.valueMap).filter(it => it.indexOf('voltage') === 0).map(v => item.valueMap[v])) : [],
      height: item.valueMap ? (Object.keys(item.valueMap).filter(it => it.indexOf('height') === 0).map(v => item.valueMap[v])) : [],
      blockShotName: item.blockShotName ? item.blockShotName : '/',
      valveStatusName: item.valveStatusName ? item.valveStatusName : '/',
      installationTime: item.installationTime ? item.installationTime : '/',
      outdoorFireHydrantOnlineTypeName: item.outdoorFireHydrantOnlineTypeName ? item.outdoorFireHydrantOnlineTypeName : '/',
      brandName: item.brandName ? item.brandName : '/',
      productName: item.productName ? item.productName : '/',
      pArr: Array.isArray(item.valueRuleList) && item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'pressure')]
      ? [
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'pressure')].minValue,
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'pressure')].maxValue
      ]
      : [],
      vArr: Array.isArray(item.valueRuleList) && item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'voltage')]
      ? [
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'voltage')].minValue,
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'voltage')].maxValue
      ] : [],
      hArr: Array.isArray(item.valueRuleList) && item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'height')]
      ? [
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'height')].minValue,
        item.valueRuleList[item.valueRuleList.findIndex(v => v.key === 'height')].maxValue
      ]
      : [],
    })
    ) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: 10,
      onChange: (current) => {
        setPageNum = current;
        this.setState({
          current,
          isChangePage: true
        });
        this.queryData({
          pageNum: current,
          pageSize: 10
        });
      },
    };

    const columns = [{
      title: '名称',
      dataIndex: 'name',
    }, {
      title: '安装位置',
      dataIndex: 'installLocation',
    }, {
      title: '设备ID',
      dataIndex: 'networkAddr',
    }, {
      title: '接收时间',
      dataIndex: 'receiveTime'
    }, {
      title: '运行状态',
      dataIndex: 'runStatusName',
    }, {
      title: '水位/m',
      dataIndex: 'height',
      render: (text, record) => (
        <Link
          to={`/data/analyse_device/deviceWaterDetails?id=${record.key}`}
        >{
          Array.isArray(text) && text.length > 0 ? 
              text.map((v, ind) => <span key={ind} style={{ color: ( record.hArr && (v > record.hArr[1] || v < record.hArr[0])) ? '#e96201' :  'var(--primary-blue)' }}>{v || '/'}</span>)
            : '/'
        }</Link>
      )
    }, {
      title: '水压/MPa',
      dataIndex: 'pressure',
      render: (text, record) => (
        <Link
          to={`/data/analyse_device/deviceWaterDetails?id=${record.key}`}
        >{
          Array.isArray(text) && text.length > 0 ? 
              text.map((v, ind) => 
                <span key={ind} style={{ color: (record.pArr && (v > record.pArr[1] || v < record.pArr[0])) ? '#e96201' :  'var(--primary-blue)' }}>
                  {v || '/'}
                </span>)
            : '/'
        }</Link>
      )
    }, {
      title: '电压',
      dataIndex: 'voltage',
      render: (text, record) => (
        <Link
          to={`/data/analyse_device/deviceWaterDetails?id=${record.key}`}
        >{
          Array.isArray(text) && text.length > 0 ? 
              text.map((v, ind) => <span key={ind} style={{ color: ( record.rArr && (v > record.rArr[1] || v < record.rArr[0])) ? '#e96201' :  'var(--primary-blue)' }}>{v|| '/'}</span>)
            : '/'
        }</Link>
      )
    }, {
      title: '阀门状态',
      dataIndex: 'valveStatusName',
      render: (value, record) => (
        <Link
          to={`/data/analyse_device/deviceWaterDetails?id=${record.key}`}
        >{value}</Link>
      )
    }, {
      title: '盖帽',
      dataIndex: 'blockShotName',
      render: (value, record) => (
        <Link
          to={`/data/analyse_device/deviceWaterDetails?id=${record.key}`}
        >{value}</Link>
      )
    }, {
      title: '安装时间',
      dataIndex: 'installationTime',
    }, {
      title: '联网方式',
      dataIndex: 'outdoorFireHydrantOnlineTypeName',
    }, {
      title: '厂家',
      dataIndex: 'brandName',
      render: (text, record) => {
        return (
          <span>{record.brandName}</span>
        )
      }
    }, {
      title: '型号',
      dataIndex: 'productName',
    }];

    return (
      <>
        <Row style={{ 'margin': '25px 30px' }}>
          <Col span={12}>
            <div className="head-left" style={{ 'margin': '10px 0 20px', 'fontSize': '18px', 'color': '#333' }}>基本信息</div>
            <WaterHeaderLeft />
          </Col>
          <Col span={12}>
            {/* <div className="head-right" style={{'margin': '10px 0 20px', 'fontSize': '18px', 'color': '#333'}}>地图</div>
            <WaterHeaderRight /> */}
          </Col>
        </Row>
        <Row>
          <SearchWaterForm
            current={this.state.current}
            initCurrent={this.initCurrent}
            handleExport={this.handleExport}
          />
          <Table
            columns={columns}
            pagination={pagination}
            dataSource={ans}
            bordered
            loading={this.props.loading}
          />
        </Row>
      </>
    );
  }
}

export default Basiccolumn;
